<template>
	<view class="content flex_c">
		<text class="header_text_one">做达人</text>
		<text class="header_text_two">月入过万不是梦！</text>

		<view class="line_title">
			<image :src="$util.prefix('expert/forward.png')" mode="aspectFill"></image>
			<text>三步成为达人</text>
		</view>

		<view class="text_content">
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">提升人气等级，获取巨量流量</text>
					<text>简单两步，就能开启您的达人之旅。</text>
				</view>
			</view>
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">深耕垂直领域</text>
					<text>每月至少更新12条作品</text>
				</view>
			</view>
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">内容质量为王</text>
					<text>账号权重分650+分解锁身份：关注、点赞、评论、转发、观看时长，五大维度见证您的实力，达人身份轻松get！</text>
				</view>
			</view>
		</view>

		<view class="line_title">
			<image :src="$util.prefix('expert/forward.png')" mode="aspectFill"></image>
			<text>流量扶持秘籍</text>
		</view>

		<view class="text_content">
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">提升人气等级，获取巨量流量</text>
					<text>1、每周发布三条作品，提升人气等级</text>
					<text>2、每天观看短视频时长大于30分钟，提升人气等级</text>
					<text>3、参与直播间互动，提升人气等级</text>
					<text>4、邀请好友，每天登录，提升人气等级</text>
				</view>
			</view>
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">加速提升人气等级</text>
					<text>直播间参与小游戏赢乐豆，用乐豆加速升级人气等级，获取巨量流量。</text>
				</view>
			</view>
		</view>

		<view class="preview_banner">
			<image :src="$util.prefix('expert/preview_banner.png')" mode="aspectFill"></image>
		</view>
		
		<view class="line_title">
			<image :src="$util.prefix('expert/forward.png')" mode="aspectFill"></image>
			<text>如何赚钱，达人专属</text>
		</view>
		
		<text class="sign">带货赚佣，我们给您提供多样选择：</text>
		
		<view class="text_content">
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">CPM曝光带货</text>
					<text>展示即收益，让每一次曝光都充满价值。</text>
				</view>
			</view>
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">CPS成交带货</text>
					<text>成交即佣金，携手商家共创双赢。</text>
				</view>
			</view>
			<view class="list">
				<view class="image_box">
					<image :src="$util.prefix('expert/list_tile.png')" mode="aspectFill"></image>
				</view>
				<view class="flex_column">
					<text class="text_title">软件推广</text>
					<text>APP、小程序、游戏…多元推广，拓宽收入边界。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.content {
		padding: 157rpx 0;
		align-items: flex-start;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/expert/exper_share_bg.png') 0 0 no-repeat #DACBF9;
		min-height: 100vh;
		background-size: 100%;

		.header_text_one {
			font-weight: 800;
			font-size: 120rpx;
			color: #222121;
			padding: 0 39rpx;
		}

		.header_text_two {
			font-weight: 800;
			font-size: 72rpx;
			color: #222121;
			margin-bottom: 50rpx;
			padding: 0 39rpx;
		}
	}

	.line_title {
		width: 672rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #7636FB 0%, rgba(118, 54, 251, 0) 100%);
		padding: 0 24rpx;
		margin: 0 39rpx 40rpx;
		display: flex;
		align-items: center;

		text {
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 72rpx;
		}

		image {
			width: 44rpx;
			height: 34rpx;
			margin-right: 16rpx;
		}
	}

	.text_content {
		padding: 0 39rpx;
		.list {
			display: flex;
			align-items: flex-start;
			margin-bottom: 40rpx;

			.image_box {
				padding-top: 3rpx;
				margin-right: 16rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			view {
				.text_title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				text {
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}

	.preview_banner {
		width: 750rpx;
		height: 440rpx;

		image {
			width: 750rpx;
			height: 440rpx;
		}
	}

	.sign {
		padding: 0 39rpx;
		margin-bottom: 40rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #7636FB;
	}
</style>